<script setup>
import { User } from '@/api';
import { ElMessage } from 'element-plus';
import { ref, onMounted } from 'vue';
// 加载列表
let count = ref(0);
let tableData = ref([]);
let load_group_list = async () => {
    let { status, msg, data } = await User.user_group_list();
    count.value = data.count;
    tableData.value = data.list;
}
// 编辑
let is_add_group = ref(false)
let user_group_form = ref([])
let uid = ref(0)
let set_user_group = async (id) => {
    uid.value = id;
    is_add_group.value = true
    let { status, msg, data } = await User.add_user_group(uid.value);
    console.log(status, msg, data);
    if (status) {
        user_group_form.value = data
    }
}
// 保存
let handle_save_user_group = async () => {
    let group_name = JSON.parse(JSON.stringify(user_group_form.value.rules)).filter((item) => {
        if (item.type === 'input') {
            return item;
        }
    })[0].value
    let { status, msg, data } = await User.save_add_user_group({ id: uid.value, group_name: group_name });
    console.log(JSON.parse(JSON.stringify(user_group_form.value.rules)));
    if (status) {
        ElMessage.success(msg);
        load_group_list();
        is_add_group.value = false
    }
}
// 删除
let handle_remove_group = async (id) => {
    ElMessageBox.confirm(
        '是否确认删除?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            let { status, msg } = await User.remove_user_group(id);
            if (status == 200) {
                ElMessage.success(msg)
                load_group_list();
            } else {
                ElMessage.error(msg)
            }
        })
        .catch(() => {
            ElMessage.info('取消')
        })
}


onMounted(() => {
    load_group_list()
})
</script>
<template>
    <el-card class="box-card">
        <el-button type="primary" @click="set_user_group(0)">添加分组</el-button>
        <el-table :data="tableData" style="width: 100%; margin-top: 15px;" border :header-cell-style="{backgroundColor:'#ececec'}">
            <el-table-column prop="id" label="ID" />
            <el-table-column prop="group_name" label="分组名称" />
            <el-table-column fixed="right" label="操作" width="300">
                <template #default="scoped">
                    <el-button link type="primary" @click="set_user_group(scoped.row.id)" size="small">修改</el-button>
                    <el-button link type="primary" @click="handle_remove_group(scoped.row.id)" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="group_list_pagination">
            <span>共{{ count }}条</span>
            <el-pagination small background layout="prev, pager, next,jumper" :total="count" />
        </div>
        <!-- 添加/修改分组 -->
        <el-dialog v-model="is_add_group" :title="user_group_form.title">
            <el-form :model="user_group_form.rules">
                <el-form-item v-for="item in user_group_form.rules" :label="item.title" :value="item.value">
                    <el-input v-if="item.type === 'input'" v-model="item.value"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="handle_save_user_group"> 确认 </el-button>
                </span>
            </template>
        </el-dialog>


    </el-card>
</template>

<style lang="less" scoped>
.group_list_pagination {
    display: flex;
}
</style>